﻿
@{
    ViewData["Title"] = "Button";
    Layout = "~/Views/Shared/_FormGray.cshtml";
}

<div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-auto">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>按钮颜色</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li>
                            <a href="#">选项1</a>
                        </li>
                        <li>
                            <a href="#">选项2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <p>
                    可使用class来快速改变按钮的颜色，如<code>.btn-primary</code>
                </p>

                <h3 class="font-bold">
                    普通按钮
                </h3>
                <p>
                    <button type="button" class="btn btn-w-m btn-default">btn-default</button>
                    <button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
                    <button type="button" class="btn btn-w-m btn-success">btn-success</button>
                    <button type="button" class="btn btn-w-m btn-info">btn-info</button>
                    <button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
                    <button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
                    <button type="button" class="btn btn-w-m btn-white">btn-white</button>
                    <button type="button" class="btn btn-w-m btn-link">btn-link</button>
                </p>
            </div>
        </div>
    </div>
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>按钮颜色</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="#">选项1</a>
                    </li>
                    <li>
                        <a href="#">选项2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">


        </div>
    </div>

    <div class="col-sm-pull-10">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <a class="login-info">
                    <h5>捐赠</h5>

                </a>

                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="alert alert-warning">
                    请作者喝杯咖啡（点击图片放大）
                </div>
                <p id="pay-qrcode">
                    <a>
                        <img src="~/image/pay.png" width="100%" alt="请使用手机支付宝或者微信扫码支付" class="img-responsive">
                    </a>
                </p>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                        <tr>
                            <th>
                                编号
                            </th>
                            <th>
                                产品
                            </th>
                            <th>
                                交付时间
                            </th>
                            <th>
                                状态
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                1
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                01/04/2012
                            </td>
                            <td>
                                Default
                            </td>
                        </tr>
                        <tr class="success">
                            <td>
                                1
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                01/04/2012
                            </td>
                            <td>
                                Approved
                            </td>
                        </tr>
                        <tr class="error">
                            <td>
                                2
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                02/04/2012
                            </td>
                            <td>
                                Declined
                            </td>
                        </tr>
                        <tr class="warning">
                            <td>
                                3
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                03/04/2012
                            </td>
                            <td>
                                Pending
                            </td>
                        </tr>
                        <tr class="info">
                            <td>
                                4
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                04/04/2012
                            </td>
                            <td>
                                Call in to confirm
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

@*<script>$(function () {

        $(".modal").appendTo("body"), $("[data-toggle=popover]").popover(), $(".collapse-link").click(function () {
            var div_ibox = $(this).closest("div.ibox"),
                e = $(this).find("i"),
                i = div_ibox.find("div.ibox-content");
            i.slideToggle(200),
                e.toggleClass("fa-chevron-up").toggleClass("fa-chevron-down"),
                div_ibox.toggleClass("").toggleClass("border-bottom"),
                setTimeout(function () {
                    div_ibox.resize();
                }, 50);
        }), $(".close-link").click(function () {
            var div_ibox = $(this).closest("div.ibox");
            div_ibox.remove()
        });

        $('#pay-qrcode').click(function () {
            var html = $(this).html();
            ys.openDialogContent({
                content: html,
                width: '600px',
                height: '321px'
            });
        });

    });</script>*@